<template>
  <div class="secondhand-container">
    <!-- 搜索和发布区域 -->
    <el-card class="search-card">
      <div class="search-header">
        <el-input
            v-model="searchQuery"
            placeholder="搜索二手商品..."
            class="search-input"
            clearable
        >
          <template #prefix>
            <el-icon><search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button type="success" @click="goodsPublish">发布商品</el-button>
      </div>

      <!-- 弹窗组件 -->
      <GoodsPublish
          :visible="isDialogVisible"
          @submit="handleSubmission"
          @close="isDialogVisible=false"
      />

      <!-- 分类标签 -->
      <div class="category-tags">
        <el-tag
            v-for="tag in categories"
            :key="tag.value"
            :type="selectedCategory === tag.value ? '' : 'info'"
            class="category-tag"
            @click="selectCategory(tag.value)"
        >
          {{ tag.label }}
        </el-tag>
      </div>
    </el-card>

    <!-- 商品列表 -->
    <div class="items-grid">
      <el-empty v-if="items.length === 0" description="暂无商品" />
      <el-card v-for="item in items" :key="item.id" class="item-card">
        <div class="item-image">
          <el-image :src="item.image" fit="cover" />
          <div class="item-price">¥{{ item.price }}</div>
        </div>
        <div class="item-info">
          <h4 class="item-title">{{ item.title }}</h4>
          <p class="item-description">{{ item.description }}</p>
          <div class="item-footer">
            <div class="seller-info">
              <el-avatar :size="24" />
              <span>{{ item.seller }}</span>
            </div>
            <el-button type="primary" size="small" @click="contactSeller(item)">
              联系卖家
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import GoodsPublish from './GoodsPublish.vue'


const searchQuery = ref('')
const selectedCategory = ref('')
const router=useRouter()

const categories = [
  { label: '全部', value: '' },
  { label: '教材书籍', value: 'books' },
  { label: '电子产品', value: 'electronics' },
  { label: '生活用品', value: 'daily' },
  { label: '运动器材', value: 'sports' },
  { label: '其他', value: 'other' }
]

// 模拟数据
const items = ref([
  {
    id: 1,
    title: '高等数学第七版教材',
    description: '九成新，有少量笔记，价格可议',
    price: 20,
    image: 'https://via.placeholder.com/200x200',
    seller: '小明',
    category: 'books'
  },
  {
    id: 2,
    title: '罗技无线鼠标',
    description: '使用3个月，无任何问题，原价99元',
    price: 45,
    image: 'https://via.placeholder.com/200x200',
    seller: '小红',
    category: 'electronics'
  }
])

// 控制弹窗显示
const isDialogVisible = ref(false)

// 触发弹窗显示
const goodsPublish = () => {
  isDialogVisible.value  = true
}

const handleSubmission = async (formData) => {
  try {
    // 实际提交逻辑
    const response = await fetch('/api/products', {
      method: 'POST',
      body: JSON.stringify(formData)
    })
    console.log(' 发布成功:', await response.json())
  } catch (error) {
    console.error(' 发布失败:', error)
  }
}

const handleSearch = () => {
  // TODO: 实现搜索功能
}

const selectCategory = (category) => {
  selectedCategory.value = category
  // TODO: 根据分类筛选商品
}

const contactSeller = (item) => {
  // TODO: 实现联系卖家功能
}
</script>

<style scoped>
.secondhand-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-header {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-tag {
  cursor: pointer;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.item-card {
  transition: all 0.3s;
}

.item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.item-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.item-image .el-image {
  width: 100%;
  height: 100%;
}

.item-price {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: bold;
}

.item-info {
  padding: 12px;
}

.item-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #333;
}

.item-description {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seller-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #999;
  font-size: 14px;
}
</style>